import './index.css'
/* 
底部组件
*/
export default function Footer({todos, clearCompleteTodos, selectAll}) {

  // 计算出完成的todo数量
  const completeSize = todos.reduce((pre,todo) => pre + (todo.complete ? 1 : 0), 0)

  return (
    <div className="todo-footer">
      <label>
        {/* onChange: 发生在我点击勾选框时 */}
        <input type="checkbox" checked={completeSize===todos.length && completeSize>0}
          onChange={e => selectAll(e.target.checked)}/>{/* 都勾选了, 它就勾选 */}
          
      </label>
      <span>
        <span>已完成{completeSize}</span> / 全部{todos.length}
      </span>
      <button className="btn btn-danger" onClick={clearCompleteTodos}>清除已完成任务</button>
    </div>
  );
}
